// 存放用css实现的，自定义ico图标。默认12个子元素view

//动态加载中图标
//在button组件使用中，view、view:before、view:after的属性background-color会改变
//如此3个元素不要背景色，需强制设为transparent
//12点圆
.vi_icon_loading1{
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	view{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color:transparent !important;
		&::before{
			content: "";
			display:block;
			width:20%;
			height:20%;
			background-color:#fff;
			border-radius:50%;
			animation:loadingDot1 1.2s infinite ease-in-out both
		}
		&:nth-child(n+13){display: none !important;}
	}
}
@for $i from 1 through 12{
	.vi_icon_loading1 view:nth-child(#{$i}){ transform: rotate(#{$i *30}deg) }
	.vi_icon_loading1 view:nth-child(#{$i})::before{ animation-delay:#{($i*0.1)-1.1}s }
}
@keyframes loadingDot1{
	0%, 39%, 100%{ opacity:0.1 }
	40%{ opacity:1 }
}
//12点圆月牙
.vi_icon_loading2{
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	view{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color:transparent !important;
		&::before{
			content: "";
			display:block;
			width:24%;
			height:24%;
			background-color:#fff;
			border-radius:100%;
			animation:loadingDot2 1.2s infinite ease-in-out both
		}
		&:nth-child(n+13){display: none !important;}
	}
}
@for $i from 1 through 12{
	.vi_icon_loading2 view:nth-child(#{$i}){ transform: rotate(#{$i *30}deg) }
	.vi_icon_loading2 view:nth-child(#{$i})::before{ animation-delay:#{($i*0.1)-1.1}s }
}
@keyframes loadingDot2{
	0%, 80%, 100%{ transform: scale(0) }
	40%{ transform: scale(1) }
}
//方形翻转
.vi_icon_loading3{
	display: inline-block;
	position: relative;
	view{
		width:1em;
		height:1em;
		background-color:#fff;
		animation: loadingDot3 1.2s infinite ease-in-out;
		&:nth-child(n+2){display: none !important;}
	}
}
@keyframes loadingDot3{
	0%{ transform: perspective(1.5em) rotateX(0deg) rotateY(0deg) }
	50%{ transform: perspective(1.5em) rotateX(-180.1deg) rotateY(0deg) }
	100%{ transform: perspective(1.5em) rotateX(-180deg) rotateY(-179.9deg) }
}
//方形条波动
.vi_icon_loading4{
	display: inline-flex;
	position: relative;
	width: 1.5em;
	height: 1em;
	view{
		margin-right: 0.1em;
		width:0.2em;
		height:1em;
		background-color:#fff;
		animation: loadingDot4 1.2s infinite ease-in-out;
		&:nth-child(n+6){display: none !important;}
	}
}
@for $i from 1 through 5{
	.vi_icon_loading4 view:nth-child(#{$i}){ animation-delay:#{($i*0.1)-1.2}s }
}
@keyframes loadingDot4{
	0%, 40%, 100%{ transform: scaleY(0.6); }
	20%{ transform: scaleY(1); }
}
//方形碎片
.vi_icon_loading5{
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	view{
		float: left;
		width:33%;
		height:33%;
		background-color:#fff;
		animation: loadingDot5 2s infinite ease-in-out;
		&:nth-child(n+10){display: none !important;}
	}
}
@for $i from 1 through 9{
	.vi_icon_loading5 view:nth-child(#{$i}){ animation-delay:#{0.1+(((-1+$i)%3+1)*0.1)-0.1*floor((-1+$i)/3)}s }
}
@keyframes loadingDot5{
	0%,70%,100%{ transform: scale3D(1, 1, 1) }
	35%{ transform: scale3D(0.1, 0.1, 1) }
}
